{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Attendance" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Attendance" %}</h1>
    <p>{% if view == "day" %}{% if is_today %}{% translate "Today" %}, {% endif %}{{ day|date:"l j F Y" }}. {% blocktranslate trimmed with n=present total=team_size %}{{ n }} of {{ total }} signed in.{% endblocktranslate %}{% else %}{{ first|date:"F Y" }}{% endif %}</p>
  </div>
  <div class="actions">
    <div class="seg" aria-label="{% translate 'Period' %}">
      <a href="?view=day"{% if view == "day" %} aria-current="true"{% endif %}>{% translate "Day" %}</a>
      <a href="?view=month"{% if view == "month" %} aria-current="true"{% endif %}>{% translate "Month" %}</a>
    </div>
    {% if view == "day" %}
      <a class="btn" href="?view=day&amp;date={{ prev_day|date:'Y-m-d' }}">{{ prev_day|date:"D j M" }}</a>
      {% if next_day %}<a class="btn" href="?view=day&amp;date={{ next_day|date:'Y-m-d' }}">{{ next_day|date:"D j M" }}</a>{% endif %}
      <a class="btn" href="?view=day&amp;date={{ day|date:'Y-m-d' }}&amp;export=csv">{% translate "Download (CSV)" %}</a>
    {% else %}
      <a class="btn" href="?view=month&amp;month={{ prev_month|date:'Y-m' }}">{{ prev_month|date:"M Y" }}</a>
      {% if next_month %}<a class="btn" href="?view=month&amp;month={{ next_month|date:'Y-m' }}">{{ next_month|date:"M Y" }}</a>{% endif %}
      <a class="btn" href="?view=month&amp;month={{ first|date:'Y-m' }}&amp;export=csv">{% translate "Download (CSV)" %}</a>
    {% endif %}
  </div>
</div>

<p class="muted small" style="margin-top:-8px">{% translate "Agents only. Time starts when an agent signs in and stops when they sign out. If they close the browser without signing out, it stops at their last activity." %}</p>

<div class="table-wrap">
  <table>
  {% if view == "day" %}
    <thead><tr><th>{% translate "Name" %}</th><th>{% translate "Signed in" %}</th><th>{% translate "Until" %}</th><th class="right">{% translate "Hours" %}</th><th class="hide-sm"></th></tr></thead>
    <tbody>
    {% for r in rows %}
      <tr{% if not r.s %} class="absent"{% endif %}>
        <td><a class="title" href="?person={{ r.person.pk }}">{{ r.person.display_name }}</a></td>
        {% if r.s %}
          <td class="num">{{ r.s.first_in|clock }}</td>
          <td class="num">{% if r.s.online %}<span class="pill online">{% translate "Online now" %}</span>{% else %}{{ r.s.last_out|clock }}{% endif %}</td>
          <td class="right num">{{ r.s.total|hours }}</td>
          <td class="hide-sm muted small">{% if not r.s.online %}{% if r.s.signed_out %}{% translate "Signed out" %}{% else %}{% translate "Last activity" %}{% endif %}{% endif %}</td>
        {% else %}
          <td colspan="2" class="muted">{% translate "Not signed in" %}</td><td class="right muted">—</td><td class="hide-sm"></td>
        {% endif %}
      </tr>
    {% endfor %}
    </tbody>
  {% else %}
    <thead><tr><th>{% translate "Name" %}</th><th class="right">{% translate "Days present" %}</th><th class="right">{% translate "Hours" %}</th><th class="right hide-sm">{% translate "Average per day" %}</th></tr></thead>
    <tbody>
    {% for r in rows %}
      <tr{% if not r.days %} class="absent"{% endif %}>
        <td><a class="title" href="?person={{ r.person.pk }}&amp;month={{ first|date:'Y-m' }}">{{ r.person.display_name }}</a></td>
        <td class="right num">{{ r.days }}</td>
        <td class="right num">{% if r.days %}{{ r.total|hours }}{% else %}—{% endif %}</td>
        <td class="right num hide-sm">{% if r.average %}{{ r.average|hours }}{% else %}—{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  {% endif %}
  </table>
</div>
{% endblock %}